<template>
    <div id="right-center-bar" style="width: 100%; height: 280px"></div>
</template>
<script lang="ts">
import { defineComponent, onMounted } from 'vue'
import Lodash from 'lodash'
import echarts from '@/echarts/index'

import { option, title } from './constant'
import { List } from '../../constant'

export default defineComponent({
    name: 'RightCenterBar',
    setup() {
        const constant = {
            option,
            arr: [] as any,
            obj: {
                name: '其他',
                value: 0
            }
        }
        onMounted(() => {
            let { option, arr, obj } = constant

            let total = List.reduce((prev: number, next: any) => {
                return prev + next.sales
            }, 0)
            let formatNumber = function (num: any) {
                let reg = /(?=(\B)(\d{3})+$)/g
                return num.toString().replace(reg, ',')
            }
            option.title[0].text = `{name|${title}}\n{val| ${formatNumber(total)}元}`

            Lodash.orderBy(List, 'sales', 'desc').forEach((el: any, index: number) => {
                if (index < 8) {
                    arr.push({
                        name: el.name,
                        value: el.sales
                    })
                } else {
                    obj.value += el.sales
                }
            })
            arr.push(obj)
            option.series[0].data = arr
            echarts.init(document.getElementById('right-center-bar')).setOption(option)
        })
        return {
            ...constant
        }
    }
})
</script>
